<html lang="en">
<head>
    <meta charset="utf -8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>

    <title>王菜鸟的淘宝网</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <style>
        form {
            display: inline;
        }

        .add-to-cart {
            color: #fff;
            border-color: #f40;
            background: #f40;
            cursor: pointer;
            width: 100px;
            height: 22px;
            text-align: center;
            font-family: 'Hiragino Sans GB', 'microsoft yahei', sans-serif;
            font-size: 10px;
            border-width: 1px;
            border-style: solid;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }

        .to-pay {
            position: absolute;
            bottom: 10px;
            right: 50%;
            color: #fff;
            border-color: #f40;
            background: #f40;
            cursor: pointer;
            width: 100px;
            height: 35px;
            text-align: center;
            font-family: 'Hiragino Sans GB', 'microsoft yahei', sans-serif;
            font-size: 20px;
            line-height: 35px;
            border-width: 1px;
            border-style: solid;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }

        .relative {
            position: relative;
        }

        .hidden {
            display: none;
        }

        .inline-block {
            display: inline-block;
        }

        .item-list .item-container {
            vertical-align: top;
            display: inline-block;
            width: 20%;
            border: 5px solid #eee;
            background: #fff;
            padding: 5px;
            height: 450px;
            position: relative;
            margin-bottom: 15px;
            /*border: 10px;*/
        }

        .item-list .item-container:hover {

            border-color: #ff4400;
        }

        body > div.item-list > a > div > div.inline-block.item-desc > div:nth-child(2) {
            margin-top: 5px;
            color: #ff4400;
            {#position: relative;#}
            {#display: inline-block;#}
            {#height: 130px;#}
        }


        .item-list .item-desc {
            width: 100%;
            font-size: 15px;
            text-align: justify;
        }

        .item-list .items {
            height: 240px;
            width: 100%;
        }

        .item-list .option {
            position: absolute;
            bottom: 2px;
        }

        .cart-list {
            padding-bottom: 80px;
        }

        .nav {
            margin-bottom: 10px;
        }

        .nav .go-to-cart {
            display: block;
            color: #fff;
            border-color: #f40;
            background: #f40;
            cursor: pointer;
            width: 60px;
            height: 22px;
            line-height: 22px;
            text-align: center;
            font-family: 'Hiragino Sans GB', 'microsoft yahei', sans-serif;
            font-size: 10px;
            border-width: 1px;
            border-style: solid;
            -moz-border-radius: 2px;
            -webkit-border-radius: 2px;
            border-radius: 2px;
        }

        body > div:nth-child(2) > a {
            text-decoration: none;
            color: #ff4400;
            padding-left: 10px;
        }

        body > div:nth-child(2) > a:hover {
            text-decoration: underline;
            color: #777777;
        }

        body > div:nth-child(2) > a.go-to-cart {
            float: right;
        }

        body > div:nth-child(2) {
            width: 80%;
            margin: auto auto 30px;
        }

        body > div:nth-child(3) {
            margin: auto;
            width: 80%;
        }

        body > div.item-list > a > div > div.inline-block.item-desc {
            width: 80%;
            margin-left: 10%;
            margin-top: 5%;
            display: inline-block;
            height: 160px;
            position: relative;
        }

        body > div.item-list > font > a > div > div.inline-block.item-desc {
            width: 80%;
            margin-left: 10%;
            margin-top: 5%;
        }

        body > div.item-list > a > div > div.option {
            width: 90%;
            padding: 10px;
        }

        body > div.item-list > a > div > div.option > div {
            float: left;
        }

        body > div.item-list > a > div > div.option > div:hover {
            text-decoration: underline;
        }

        body > div.item-list > a > div > div.option > form > button {
            float: right;

        }

        body > div.item-list > a > div > div.option > form > button:hover {
            text-decoration: underline;

        }

        body > div.item-list > a > div > div.inline-block.item-desc > div:nth-child(2):hover {
            text-decoration: underline;
        }

        body > div.item-list > a > div > div.inline-block.item-desc > div:nth-child(3) > span:nth-child(1):hover {
            text-decoration: underline;
            color: #FF4400;
        }

        body > div.item-list > a > div > div.inline-block.item-desc > div:nth-child(3) > span:nth-child(2):hover {
            text-decoration: underline;
            color: #FF4400;
        }
    </style>
</head>
{% load static %}
<body>

<div class="nav">

    <img src="{% static "banner.jpg" %}">
    <h3 style="text-align:center;">亲，欢迎您来到天猫购物哟，快来看看有没有喜欢的加入购物车吧。</h3>
    <div style="text-align: center">
        <input type="text" id="kw" style="width: 30%; height: 40px; " value="{{ kw }}"/>
        <button onclick="search()"
                style="width: 10%; height: 40px; color: #FFFFFF; background-color: #ff4400;border: 0px">搜索
        </button>
    </div>

</div>

<div class="nav">
    {% if request.sessions.user %}
        欢迎你{{ request.session.user }}
    {% else %}
        <a href="{% url 'user:register' %}">注册</a>
        <a href="{% url 'user:login' %}">登录</a>
        <a href="https://www.taobao.com/" target="_blank">点击此处访问淘宝官网!</a>
        <a href="/pay/log">查看订单</a>
    {% endif %}
    <a class="go-to-cart" href="{% url 'cart:list' %}">去购物车</a>
</div>

{% if list %}
    <div class="item-list">
        {% for l in list %}
            <a href="">
                <div class="item-container">
                    <img class="items" src="{{ l.image }}"/>
                    <div class="inline-block item-desc">
                        <div>
                            <div style="color: #FF4400; display: inline-block;font-size: 20px">
                                {{ l.price }}元
                            </div>
                            {% if l.postal %}
                                <div style="display: inline-block; color: #FFFFFF; background-color: #FF4400;font-size: 15px;border-radius: 3px;">
                                    包邮
                                </div>
                                </div>
                            {% endif %}
                        <div>
                            {{ l.title | safe }}
                        </div>
                        <div style="position: absolute; bottom: 0; display: inline-block; width: 100%">
                            <span style="font-size: 5px;float: left; color: #888;">{{ l.shopNick }}</span>
                            <span style="font-size: 10px;float: right">{{ l.payNum }}</span>
                        </div>

                    </div>
                    <div class="option">
                        <div class="count inline-block">
                            库存 {{ l.count }}
                        </div>
                        <form action="{% url 'cart:add-to-cart' l.id %}" method="POST">
                            {% csrf_token %}
                            <input class="hidden"/>

                            <button
                                    class="add-to-cart"
                                    onclick="window.alert('添加成功')"
                                    type="submit"
                            >
                                加入购物车
                            </button>
                        </form>
                    </div>
                </div>
            </a>
        {% endfor %}
    </div>

{% else %}
    <p>亲，您的购物车是空的呢！请去添加商品到购物车吧~</p>
{% endif %}
<div style="text-align: center">
    <div>当前：{{ page }}</div>

    {% if pre %}
        <button style="margin: 30px" onclick="beforepage()">上一页</button>
    {% endif %}
    {% if next %}
        <button style="margin: 30px" onclick="nextpage()">下一页</button>
    {% endif %}


</div>

<h3 style="text-align:center;">技术支持：王菜鸟</h3>
<h5 style="text-align:center;">Powered by The king of rookies!</h5>
<h6 style="text-align:center;">1720929001@qq.com</h6>
<script>
    var sParams = {};
    var rowParams = location.search.replace('?', '').split('&');
    for (let i = 0; i < rowParams.length; i++) {
        let tempdata = rowParams[i].split('=')
        sParams[tempdata[0]] = tempdata[1];
    }

    if (rowParams.length == 1) {
        sParams = {
            kw: '',
            page: 1,
            pagesize: 48
        }
    }

    function beforepage() {
        let page = Number(sParams.page) - 1;
        if (page <= 0) {
            page = 1;
        }
        let pagesize = Number(sParams.pagesize);
        if (!pagesize) {
            page = 10;
        }
        window.location.href = './?kw=' + document.getElementById("kw").value + '&page=' + page + '&pagesize=' + pagesize
    }

    function nextpage() {
        let page = Number(sParams.page) + 1;
        if (page <= 0) {
            page = 1;
        }
        let pagesize = Number(sParams.pagesize);
        if (!pagesize) {
            page = 10;
        }
        window.location.href = './?kw=' + document.getElementById("kw").value + '&page=' + page + '&pagesize=' + pagesize
    }

    function search() {
        window.location.href = './?kw=' + document.getElementById("kw").value + '&page=1&pagesize=48';
    }
</script>
</body>
</html>
